<template>
    <div>
        <!-- <input name="phoneCode" class='otherInput' @click='phoneCodeSelect'  readonly="readonly"  v-model="phoneCodeValue"  maxlength="10" /> -->
        <span class='otherInput' :class="phoneCodeValue == '电话区号' ? 'otherInputVerify' : ''" @click='phoneCodeSelect'>{{phoneCodeValue}}</span>
        <!--电话区号-->
        <div class="phoneCode"  v-if="phoneCodediv" @touchmove.prevent>
            <div class="phoneCode-flex">
                <div class="phoneCode-main" ref="phoneCodeDom">
                    <li class="phoneCode-main-list-item" v-for="(item,index) in phoneCodeArr" >
                        <label :for="item.sign+index" @click="phoneChange(item.name)"> <input type="radio" :id="item.sign+index" :value="item.name" v-model="phoneCodeValue"><span>{{item.name}}</span></label>
                    </li>
                    <li class="phoneCode-main-list-item"  v-if="otherInput" >
                        <input  type="text" v-model="otherCode" class="otherCode">
                        <div class="btn" @click="closed">确定</div>
                    </li>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "TelCode",
        data(){
            return{
                phoneCodediv:false,
                phoneCodeValue:'+86',
                otherInput:false,
                otherCode:'+',
                phoneCodeArr: [
                    { name: '电话区号',sign:'code'},
                    { name: '+1',sign:'code'},
                    { name: '+86',sign:'code'},
                    { name: '+852',sign:'code'},
                    { name: '+853',sign:'code'},
                    { name: '+886',sign:'code'},
                    { name: '其他（点击+添加）',sign:'code'}
                ],
                phoneCode_top:0,
                clientHeight:0,
            }
        },
        props:['phoneCode'],
        watch:{
            'phoneCodeValue':function(val,oldval){
                this.$emit('phoneCodeFn', val)
            }
        },
        methods: {
            closed(){
                this.phoneCodediv=false;
                this.phoneCodeValue=this.otherCode;
            },
            // 选择国家代码
            phoneCodeSelect(){
                var _that=this;
                _that.phoneCodediv=true
                // setTimeout(()=>{
                //     this.phoneCode_top=(this.clientHeight - parseInt(window.getComputedStyle(this.$refs.phoneCodeDom).height)) / 2
                // },10)
            },
            phoneChange(val) {
                if (val=='其他（点击+添加）'){
                    this.otherInput=true;
                }else{
                    this.phoneCodediv= false;
                    this.otherInput=false;
                }
            }
        },
        mounted(){
//            console.log(this.phoneCode)
            this.phoneCodeValue=this.phoneCode;
            this.clientHeight=document.documentElement.clientHeight;
   
            let m = navigator.userAgent;
            let isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);    
            if (isIos) {
                let inputs = document.querySelectorAll('input');
                inputs.forEach(function(input){
                    input.addEventListener('blur',function(){
                        setTimeout(() => {
                            window.scrollTo(0, input.offsetTop); 
                        }, 0);
                    },false)　
                })
                let textareas = document.querySelectorAll('textarea');
                textareas.forEach(function(textare){
                    textare.addEventListener('blur',function(){
                        setTimeout(() => {
                            window.scrollTo(0, textare.offsetTop); 
                        }, 0);
                    },false)　
                })
            }
            
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .otherInput{
        // width:rpx(130);
        // padding-left: rpx(10);
        display: inline-block;
        white-space: nowrap;
        // min-width:rpx(120);
        padding: rpx(5) rpx(40) 0 rpx(10);
        background: url(../assets/arr_down.png) no-repeat center right;
        background-size: rpx(32) rpx(32);
        font-size: rpx(30);
    }
    .otherInputVerify{
        color: #F9593E;
    }
    //电话区号
    .phoneCode{
        position: fixed;
        background: rgba(0,0,0,.5);
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        z-index: 999;
        &-flex{
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
        }
        &-main{
            position: relative;
            padding: rpx(30);
            margin: auto;
            background: $color0;
            width: rpx(400);
            &-list{
                margin: auto;
                &-item{
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    padding: rpx(15);
                    font-size: rpx(32);
                    line-height: 100%;
                    height: rpx(32);
                    label{
                        display: block;
                        width: 100%;
                        padding: rpx(13) 0;
                        display: flex;
                        align-items: center;

                    }
                    input{
                        margin-right: rpx(13);
                        border-width: 1px;
                        appearance:normal;
                        -moz-appearance:radio; /* Firefox */
                        -webkit-appearance:radio; /* Safari 和 Chrome */
                    }
                    span{
                        // position: absolute;
                        // top:rpx(10);
                        font-size: rpx(30);
                    }
                    .otherCode{
                        width: rpx(140);
                        -moz-appearance: none; /* Firefox */
                        -webkit-appearance: none; /* Safari 和 Chrome */
                        border:solid $color2 1px;
                        height: rpx(50);
                        line-height: rpx(50);
                        text-align: center;
                    }
                    .btn{
                        display: inline-block;
                        border: 1px solid $color2;
                        padding: rpx(6) rpx(20) ;
                        font-size: rpx(24);
                        color:$color5;
                    }
                }
            }
        }
    }
</style>